<template>
  <el-dialog
    custom-class="add-dialog"
    :visible.sync="dialogTableVisible"
    title="车位分配"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="formData"
      label-width="110px"
      class="box_acct_form"
    >
      <el-row :gutter="12">

        <el-form-item label="车位名称:" prop="parkname" style="margin-left: -5px;">
          <el-input
            size="small"
            v-model="formData.parkname"
            :disabled="isNotEdit"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="12">

        <el-form-item label="车位金额:" prop="parkpay" style="margin-left: -5px;">
          <el-input
            size="medium"
            v-model="formData.parkpay"
            :disabled="isNotEdit"
          ></el-input>
        </el-form-item>

      </el-row>
      <el-row :gutter="24">
        <el-form-item label="车位类型:" prop="parktype">
          <el-select
            size="medium"
            clearable
            v-model="formData.parktype"
            :disabled="isNotEdit"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row :gutter="24">
        <el-form-item label="车位状态:" prop="parkstatus">
          <el-select
            size="small"
            clearable
            v-model="formData.parkstatus"
            :disabled="isNotEdit"
          >
            <el-option
              v-for="item in typeList1"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <!--            <el-row :gutter="24">-->
      <!--                <el-col :span="12">-->
      <!--                    <el-form-item label="是否启用">-->
      <!--                        <el-checkbox v-model="checked"></el-checkbox>-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="!isNotEdit"
        type="primary"
        class="full-width"
        @click="close"
        >取消</el-button
      >
      <el-button
        v-if="this.actionType == 'add'"
        type="primary"
        class="full-width"
        @click="submit"
        >提交</el-button
      >
      <el-button
        v-if="this.actionType == 'edit'"
        type="primary"
        class="full-width"
        @click="save"
        >保存</el-button
      >
      <el-button
        v-if="!isNotEdit"
        type="primary"
        class="full-width"
        @click="reset"
        >重置</el-button
      >
      <el-button
        v-else
        type="primary"
        class="full-width"
        @click="dialogTableVisible = false"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "addDialog",
  data() {
    return {
      actionType: "",
      // typeInfo: '',
      dialogTableVisible: false,
      loading: false,
      formData: {
        parkname: "",
        parkpay: "",
        parktype: null,
        parkstatus: null,
      },
      typeList: [
        {
          text: "地下",
          value: "1",
        },
        {
          text: "地上",
          value: "2",
        },
      ],
      typeList1: [
        {
          text: "已有车",
          value: "1",
        },
        {
          text: "未有车",
          value: "2",
        },
      ],
      // 校验规则
      rules: {
        parkname: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
        parkpay: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
        parktype: [
          { required: true, message: "缴费金额不能为空", trigger: "blur" },
        ],
        parkstatus: [
          { required: true, message: "缴费状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    titleMsg() {
      if (this.actionType == "edit") {
        return "用户信息编辑";
      } else if (this.actionType == "detail") {
        return "用户信息查看";
      } else if (this.actionType == "add") {
        return "新增用户";
      }
    },
    isNotEdit() {
      if (this.actionType == "detail") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    // 获取父组件传的行数据
    init(row) {
        this.formData = {
        ...row,
        parktype: row.parktype.toString(),
        parkstatus: row.parkstatus.toString()
      };
    },
    // 取消
    close() {
      this.dialogTableVisible = false;
    },

    submit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          this.$message.error({
            message: "必填项不能为空",
            duration: 2000,
          });
        } else {
          this.$axiosToken({
            url: "/parking/addParkData",
            method: "post",
            data: {
              u_id: this.formData.id,
              parkname: this.formData.parkname,
              parkpay: this.formData.parkpay,
              parktype: Number(this.formData.parktype),
              parkstatus: Number(this.formData.parkstatus),
            },
            success: (result) => {
              this.$parent.getData();
              this.$message({
                showClose: true,
                message: "用户添加成功",
                type: "success",
              });
            },
          });
          this.dialogTableVisible = false;
        }
      });
    },
    // 编辑保存
    save() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          this.$message.error({
            message: "必填项不能为空",
            duration: 2000,
          });
        } else {
          this.$axiosToken({
            url: "/parking/editParkData",
            method: "post",
            data: {
              u_id: this.formData.id,
              parkname: this.formData.parkname,
              parkpay: this.formData.parkpay,
              parktype: Number(this.formData.parktype),
              parkstatus: Number(this.formData.parkstatus),
            },
            success: (result) => {
              this.$parent.getData();
              this.$message({
                showClose: true,
                message: "用户修改成功",
                type: "success",
              });
              console.log("-----",result);
              
            },
          });
          this.dialogTableVisible = false;
        }
      });
    },

    // 重置
    reset() {
      this.formData = {
        parkname: "",
        parkpay: "",
        parktype: null,
        parkstatus: null,
      };
    },
  },
};
</script>

<style scoped>
::v-deep.el-dialog__title {
  line-height: 24px;
  font-size: 20px;
  color: #303133;
  font-weight: bolder;
}
.box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-input {
  width: 100%;
}
.box_acct_form .el-row .el-col .el-form-item .el-form-item__content .el-select {
  width: 100%;
}
textarea
  .box_acct_form
  .el-row
  .el-col
  .el-form-item
  .el-form-item__content
  .el-textarea {
  width: 100%;
}

.box_acct_form .el-row {
  margin-bottom: 0px;
}
::v-deep .add-dialog {
  width: 400px;
  margin: auto;
  overflow: auto;
}
.msg_form {
  margin: 7px 15px;
}

.msg_form .msg_title {
  clear: both;
  display: block;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  margin: 0 0 14px;
  position: relative;
  font-weight: bold;
  color: #327501;
  color: #20a0ff;
  font-size: 16px;
}

::v-deep .msg_form .msg_title .msg_title_tips {
  color: #797979;
  font-weight: normal;
  font-size: 12px;
}

.msg_box {
  position: relative;
  width: 100%;
}

.btn_div {
  text-align: center;
}
.btn_div button {
  height: 32px;
  width: 107px;
}

.box_content {
  background: #f9f9f9;
  border: 1px solid #d1d1d1;
  padding: 15px;
  margin: 0px 10px;
  position: relative;
}
.el-button {
  width: 60px;
  height: 36px;
  font-size: 14px;
}
</style>
